<script setup>
import { ref } from 'vue'
import {
  NFlex,
  NLayoutSider,
  NMenu,
  NLayout,
  NList,
  NListItem,
  NFloatButton,
  NTooltip,
  NIcon,
  NModal,
  NCard,
  NTabs,
  NTabPane,
  NThing,
  NAvatar,
  NButton
} from 'naive-ui'
import { StoreMicrosoft24Filled as Store, Fingerprint24Filled as Finger, Settings28Filled as Setting } from '@vicons/fluent'
const open = ref(false)
const openStore = () => {
  open.value = true
}
</script>

<template>
  <!-- 商店页面 -->
  <n-modal v-model:show="open">
    <n-card
      style="width: 600px; height: 500px"
      title="管理组件"
      :bordered="false"
      size="huge"
      role="dialog"
    >
      <n-layout :native-scrollbar="false">
        <n-tabs type="line" placement="bottom">
          <!-- 浏览本地组件 -->
          <n-tab-pane name="has" tab="本地组件">
            <n-list style="height: 350px; overflow-y: auto">
              <n-list-item>
                <n-thing>
                  <!-- 图标 -->
                  <template #avatar>
                    <n-avatar><n-icon><Store/></n-icon></n-avatar>
                  </template>
                  <!-- 标题 -->
                  <template #header> 货币 </template>
                  <!-- 操作 -->
                  <template #header-extra>
                    <n-button circle size="small">
                      <template #icon>
                        <Finger />
                      </template>
                    </n-button>
                  </template>
                  <template #description> 描述 </template>
                  货币是为了提高交易效率而用于交换的中介商品。货币有多种形式，如贝壳粮食等自然物、金属纸张等加工品、银行卡信用卡等磁条卡、移动支付加密货币等APP。
                </n-thing>
              </n-list-item>
            </n-list>
          </n-tab-pane>
          <!-- 获取组件 -->
          <n-tab-pane name="get" tab="获取组件">
            <n-list style="height: 350px; overflow: auto">
              <n-list-item>
                <n-thing>
                  <template #avatar>
                    <n-avatar>
                      <n-icon>
                        <Store />
                      </n-icon>
                    </n-avatar>
                  </template>
                  <template #header> 货币2 </template>
                  <template #header-extra>
                    <n-button circle size="small">
                      <template #icon>
                        <Finger />
                      </template>
                    </n-button>
                  </template>
                  <template #description> 描述 </template>
                  货币是为了提高交易效率而用于交换的中介商品。货币有多种形式，如贝壳粮食等自然物、金属纸张等加工品、银行卡信用卡等磁条卡、移动支付加密货币等APP。
                </n-thing>
              </n-list-item>
            </n-list>
          </n-tab-pane>
        </n-tabs>
      </n-layout>
    </n-card>
  </n-modal>
  <!-- 浮动按钮 -->
  <n-float-button position="absolute" type="primary" menu-trigger="click" :right="35" :bottom="24">
    <n-icon>
      <Setting />
    </n-icon>
    <template #menu>
      <n-tooltip trigger="hover" placement="right">
        <template #trigger>
          <n-float-button @click="openStore">
            <n-icon>
              <Store />
            </n-icon>
          </n-float-button>
        </template>
        管理组件
      </n-tooltip>
    </template>
  </n-float-button>
</template>

<style>
/*@import '/src/style.css'*/
</style>
